<!--
 * @Author: Bennty
 * @Date: 2024-12-17 16:39:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-19 16:15:22
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="微定制配料申请" @close="handleClose">
        <div id="print-area" ref="printArea">
            <table class="order-table">
                <colgroup>
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                    <col style="width: 16.7%;">
                </colgroup>
                <tr>
                    <td>客户名称：</td>
                    <td colspan="2">{{props.customers.filter((item)=>item.id == props.orderDetails.customerId)[0]?.customerName}}</td>
                    <td>生产数量：</td>
                    <td colspan="2">{{ props.orderDetails.number }}</td>
                </tr>
                <tr>
                    <td>生产单号：</td>
                    <td colspan="5" class="img-col">
                        <img class="product-image" :src="props.orderDetails?.codeUrl" alt="">
                        <div class="order-number">{{ props.orderDetails?.saleOrderCode }}</div>
                    </td>
                </tr>
                <tr>
                    <td>材料大类</td>
                    <td>材料小类</td>
                    <td colspan="2">部件名称</td>
                    <td>总需数量</td>
                    <td>申请数量</td>
                </tr>
                <tr v-for="(item,index) in ingredientList" :key="item.id">
                    <td>{{ item.majorName }}</td>
                    <td>{{ item.subclassName }}</td>
                    <td colspan="2" style="text-align: left; padding-left: 10px">{{ `${index + 1}. ${item.productName}` }}</td>
                    <td >{{ item.needNumber }}</td>
                    <td >
                        <el-input @dblclick="handleSwitchInput(index)" v-if="item.isInput" class="apply-input" v-model="item.applyNumber" type="number"></el-input>
                        <span class="apply-number" @dblclick="handleSwitchInput(index)" v-else>{{ item.applyNumber }}</span>
                    </td>
                </tr>
            </table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { getApplyIngredientsDetailsApi, applyIngredientsApi } from '@/api/sj/productManagement/customizedOrder';

const props = defineProps<{
    visible: boolean,
    orderDetails: any,
    customers: any[]
}>();
const emits = defineEmits(['close', 'submit']);
const ingredientList = ref<any[]>([]);

watch(()=>[props.visible,props.orderDetails],async ([newVisible, newData])=>{
    if(newVisible){
        const { code, data } = await getApplyIngredientsDetailsApi(newData.id);
        if(code == 200){
            ingredientList.value = data.map((item: any)=>{
                return {
                    ...item,
                    isInput: true
                }
            });
        };
    };
},{deep: true});

const handleSwitchInput = (index: number) => {
    ingredientList.value[index].isInput = !ingredientList.value[index].isInput;
};

const handleSubmit = async () => {
    const submitData = ingredientList.value.map((item: any)=>{
        return {
            ...item,
            customizedProductId: props.orderDetails.id
        }
    });
    const {code} = await applyIngredientsApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    emits('close')
};
</script>

<style lang="scss" scoped>
#print-area{
    display: flex;
    justify-content: center;
    flex-flow:wrap
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td{
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        padding-top: 12px;
        .product-image{
            width: 70%;
            height: 50px;
        }
        .order-number{
            color: blue
        }
    }
    .not-center{
        text-align: left;
    }
    .code-image{
        height: 100px
    }
    .inventory-alert{
        color: red;
    }
    .field-title{
        font-weight: bold;
    }
    .auxiliary-name{
        display: flex;
        justify-content: space-between;
        span{
            display: block
        }
    }
    .inputing-col{
        display: flex;
        justify-content: center;
        align-items: center;
        .inputing-col{
            display: flex;
            align-items: center;
        }
    }
    .apply-input{
        width: 110px;
        height: 40px;
    }
    .apply-number{
        display: block;
        width: 110px;
        height: 40px;
        cursor: pointer;
    }
}
.order-info{
    width: 90%;
    font-size: 15px;
}
</style>